<script setup>

</script>

<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <img src="/imgs/reg.png" width="65%">
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-form label-width="80px" style="margin-top: 50px;"><!--  label-width="80px"用来给下边的label设置宽度  -->
          <el-form-item>
            <h1 style="float: left">立即注册</h1> <span style="color: #0aa1ed;float:right;text-decoration: none;font-size: 15px;">已有账号，请<a href="/#/login" style="color: #0aa1ed;float:right;text-decoration: none;">登录</a></span>
          </el-form-item>   <!--  v-model:双向绑定  -->
          <el-form-item label="用户名"><el-input  v-model="user.username"  placeholder="请输入用户名"></el-input></el-form-item>
          <el-form-item label="密码"><el-input  v-model="user.password"  placeholder="请输入密码"></el-input></el-form-item>
          <el-form-item label="昵称"><el-input  v-model="user.nickname"  placeholder="请输入昵称"></el-input></el-form-item>
          <el-form-item><el-button type="primary"  @click="reg()">注册</el-button></el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
</style>
<script>
export default {
  name: "RegView",
  data(){
    return {
      user: {username:"", password:"", nickname:""}
    }
  },
  methods:{
    //需要在main.js中导入axios和qs框架
    //然后将RegView.vue中的文本输入框和user对象进行双向绑定(v-model)
    //并给注册按钮添加点击事件，点击时用reg函数发送post请求，把user对象用qs转化为json字符串(也叫查询字符串)发送给服务器
    //controller接受注册数据并处理(持久化)。 处理完成后返回一个JSONResult数据。 这里再执行then里的代码(显示一个注册成功标识或者注册失败标识)
    reg() {
      let data=this.qs.stringify(this.user);//需要导入qs框架
      this.axios.post('http://localhost:8088/users/reg',data).then((res)=>{
        //response代表响应对象response.data服务器响应的数据
        //response.data=服务器响应的JsonResult对象
        if(res.data.code === 1){
          this.$message({
            type: 'success',
            message: '注册成功'
          })
          this.$router.push('/login')
        }else{
          this.$message.error(res.data.msg);
        }
      })
    }
  }
}
</script>
